import 'package:flutter/material.dart';
import 'package:wallpaper_app/components/Images/image_load.dart';
import 'package:wallpaper_app/components/Images/image_view.dart';
import 'package:wallpaper_app/tools/route_animation.dart';

class BuildItem extends StatefulWidget {
  final List<dynamic> imgs;
  final int index;
  final bool isZip;
  const BuildItem({
    super.key,
    required this.imgs,
    required this.index,
    this.isZip = false,
  });

  @override
  State<BuildItem> createState() => _BuildItemState();
}

class _BuildItemState extends State<BuildItem> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context).colorScheme;
    return MouseRegion(
      onEnter: (_) => setState(() => _isHovered = true),
      onExit: (_) => setState(() => _isHovered = false),
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        transform: Matrix4.translationValues(0, _isHovered ? -4.0 : 0.0, 0),
        child: Card(
          elevation: _isHovered ? 5 : 3,
          shadowColor: _isHovered ? theme.primary : theme.shadow,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5),
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(5),
            child: Stack(
              children: [
                Positioned.fill(
                  child: Stack(alignment: Alignment.bottomLeft, children: [
                    SizedBox(
                      width: double.infinity,
                      height: double.infinity,
                      child: ImageLoad(
                          imageUrl: widget.imgs[widget.index].smallPath),
                    ),
                    if (widget.imgs[widget.index].tags != '')
                      Container(
                        width: double.infinity,
                        padding: const EdgeInsets.all(3),
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Colors.black.withOpacity(0),
                              Colors.black.withOpacity(1),
                            ],
                          ),
                        ),
                        child: Text(
                          widget.imgs[widget.index].tags,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(color: Colors.white, fontSize: 13),
                        ),
                      )
                  ]),
                ),
                Positioned.fill(
                  child: Material(
                    color: Colors.transparent,
                    child: InkWell(
                      hoverColor: Colors.white.withOpacity(0.05),
                      onTap: () {
                        FocusScope.of(context).requestFocus(FocusNode());
                        RouteAnimation().animateRoute(
                          context,
                          ImageView(
                            images: widget.imgs,
                            selectedIndex: widget.index,
                            resetGetdata: () {},
                          ),
                          type: AnimationType.fade,
                        );
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
